<template>
    <el-container >
        <el-container>
            <el-header style=" font-size: 16px">
                
                <div style="margin-left:20px">
                    <el-card>
                     <el-form :data="tableDate">
                        <el-form-item  :inline="true" >
                            <el-button style="color: #3A3A3A;margin-left:20px;font-size:25px;font-weight:bold;" :disabled="true" type="warning"> 交易账户</el-button>
                            <span style="color: #3A3A3A;margin-left:30px;font-size:16px;">总账户：¥ {{tableDate.usersurplusintegral}}</span>
                            <span style="color: #3A3A3A;margin-left:80px;font-size:16px;">可提现账户：¥ {{tableDate.unlimitedaccount}}</span>
                            <span style="color: #3A3A3A;margin-left:80px;font-size:16px;">转账账户：¥ {{tableDate.limitaccount}}</span>
                        </el-form-item>
                        <el-form-item  :inline="true">
                            <el-button style="color: #3A3A3A;margin-left:20px;font-size:25px;font-weight:bold;" :disabled="true" type="success"> 结算账户</el-button>
                            <span style="color: #3A3A3A;margin-left:30px;font-size:16px;">已结算账户：¥ {{tableDate.settlementaccount}}</span>
                            <span style="color: #3A3A3A;margin-left:90px;font-size:16px;">预结算账户：¥ {{tableDate.presettlementaccount}}</span>
                        </el-form-item>
                     </el-form>
                     <div style="line-height:40px">
                        <el-button style="margin-left: 20px"  type="primary" @click.native="handClick()" :plain="hand">交易明细</el-button>
                        <el-button style="margin-left: 20px" type="primary" @click.native="payClick()" :plain="pay">结算明细</el-button>
                        <el-button style="margin-left: 20px" type="primary" @click.native="readyClick()" :plain="ready">预结算明细</el-button>
                     </div>
                     </el-card>
                </div>
            </el-header>

            <el-main style="margin-top:180px">
                <div v-if="contor.handFlag">
                    <handDetail></handDetail>
                </div>
                <div v-if="contor.payFlag">
                    <payDetail></payDetail>
                </div>
                <div v-if="contor.readyFlag">
                    <readyDetail></readyDetail>
                </div>
            </el-main>
        </el-container>
    </el-container> 
</template>
<script>
import { info } from "../../api/fundsManagement/index";
    //引入vue文件
    import handDetail from  "./handDetail.vue"
    import payDetail from "./payDetail"
    import readyDetail from "./readyDetail"
    //暴露配好的组件
    export default {
        name:"fundsDetail",
        components:{handDetail,payDetail,readyDetail},
        component:{
            handDetail,
            payDetail,
            readyDetail        
        },
        data(){
            const contor ={
               handFlag:true,
               payFlag:false,
               readyFlag:false,     
            };
            return{
                contor,
                userId:"",//登录账号的id
                tableDate:{},
                loading:false,
                hand:false,
                pay:true,
                ready:true,

            }  
        },
        methods:{
            handClick(){
                this.contor.handFlag=true,
                this.contor.payFlag=false,
                this.contor.readyFlag=false
                this.hand=false,
                this.pay=true,
                this.ready=true
            },
            payClick(){
                this.contor.handFlag=false,
                this.contor.payFlag=true,
                this.contor.readyFlag=false
                this.hand=true,
                this.pay=false,
                this.ready=true
            },
            readyClick(){
                this.contor.handFlag=false,
                this.contor.payFlag=false,
                this.contor.readyFlag=true
                this.hand=true,
                this.pay=true,
                this.ready=false
            },
            //获取表头信息
            getInfo(){
                this.loading =true
                info()
                .then(res=>{
                   if(res.code !=0){
                        this.$message.warning(res.message)
                        this.loading=false
                        return false
                    }
                    this.tableDate =res.data
                    this.loading =false
                })
                .catch(err=>{
                    
                    this.tableDate=[]
                    this.loading=false
                })
            }
        },
        created(){
           
        },
        mounted(){
           this.getInfo()
        },
        
    }
</script>


